/**
 * @parma author ludan
 * @param explain 网盘录入信息模块
 */
import React, { useState } from 'react'
import { Observer } from 'mobx-react-lite'
import NetworkTable from '@/components/NetworkTable'
import { Button } from 'antd'
import NetworkDrawer from './NetworkDrawer'
import NetworkHeader from './NetworkHeader'

interface basePropsType {
  [key: string]: any;
}

const NetdiskInfo: React.FC = (props: basePropsType) => {
  const [open, setOpen] = useState(false);
  const [selectItem, setSelectItem] = useState({});
  const showDrawer = (type: string = "close", record?: object) => {
    setOpen(type === 'open' ? true : false);
    record && setSelectItem({ isComplete: "0", name: "编辑内容", url: "wwww.baidu", skillTag: ["react", "vue"], watchProgress: "2", introduce: "编辑内容自行定义" });
  }

  return (
    <Observer>
      {() => (
        <div>
          <NetworkHeader>课程信息</NetworkHeader>
          <Button type="primary" onClick={() => showDrawer('open')} style={{ width: "130px" }}>添加新课程</Button>
          <NetworkDrawer
            open={open as boolean}
            onClose={() => showDrawer("close")}
            selectItem={selectItem}
            title="添加新课程"
          />
          <NetworkTable
            editBtnClose={(record) => showDrawer(record ? "open" : "colse", record)}
            scroll={{ y: 350 }}
          />
        </div>
      )}
    </Observer>
  )
}

export default NetdiskInfo;